<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编译中梦见未来</title>
    <link rel="stylesheet" href="./style.css">
</head>
<style>
    :root {
        --background-color: #2c3e50;
        --border-color: #7591AD;
        --text-color: #34495e;
        --color1: #ec3e27;
        --color2: #fd79a8;
        --color3: #0984e3;
        --color4: #00b894;
        --color5: #fdcb6e;
        --color6: #e056fd;
        --color7: #F97F51;
        --color8: #BDC581;
    }

    * {
        margin: 0;
        padding: 0;
    }

    html {
        font-size: 14px;
    }

    body {
        width: 100vw;
        height: 100vh;
        background-color: var(--background-color);
        display: flex;
        justify-content: center;
        align-items: center;
        /* font-family: 'Montserrat', sans-serif, Arial, 'Microsoft Yahei'; */
    }


    .container {
        position: relative;
        width: 100vw;
        height: 100vh;
        background-color: #000;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        perspective: 800px;
        perspective-origin: left;
        transform-style: preserve-3d;
    }

    .line {
        position: absolute;
        width: 200px;
        height: 3px;
        border-radius: 3px;
        /* background-color: #fff; */
        background-image: linear-gradient(to right, var(--color), #ffffff50, transparent);
        animation: down 1s linear infinite both;
        animation-delay: calc(var(--d) * 0.3s);
    }

    .line::before,
    .line::after {
        position: absolute;
        content: "";
        width: inherit;
        height: inherit;
        background-image: inherit;
    }

    .line::before {
        filter: blur(5px);
    }

    .line::after {
        filter: blur(10px);
    }

    @keyframes down {
        0% {
            transform:
                translateY(calc(var(--z) * 60px)) translateZ(calc(var(--z) * 100px)) rotate(-45deg) translateX(calc(var(--x) * 100px));
        }

        100% {
            transform:
                translateY(calc(var(--z) * 60px)) translateZ(calc(var(--z) * 100px)) rotate(-45deg) translateX(calc(var(--x) * -100px));
        }
    }
</style>

<body>

    <div class="container">
        <div class="line" style="--color:#ec3e27;--x:3;--z:3;--d:1;"></div>
        <div class="line" style="--color:#fff;--x:3;--z:2;--d:2;"></div>
        <div class="line" style="--color:#fff;--x:4;--z:1;--d:3;"></div>
        <div class="line" style="--color:#fd79a8;--x:4;--z:0;--d:1;"></div>
        <div class="line" style="--color:#fff;--x:6;--z:-1;--d:2;"></div>
        <div class="line" style="--color:#0984e3;--x:6;--z:-2;--d:3;"></div>
        <div class="line" style="--color:#fff;--x:8;--z:-3;--d:1;"></div>
        <div class="line" style="--color:#fff;--x:10;--z:-4;--d:2;"></div>
        <div class="line" style="--color:#fff;--x:12;--z:-5;--d:3;"></div>
        <div class="line" style="--color:#fff;--x:14;--z:-6;--d:1;"></div>
        <div class="line" style="--color:#fff;--x:16;--z:-7;--d:2;"></div>
        <div class="line" style="--color:#fff;--x:18;--z:-8;--d:3;"></div>
        <div class="line" style="--color:#e056fd;--x:20;--z:-9;--d:1;"></div>
    </div>

    <script>
    // // 提前写好的要给代码可以通过鼠标控制perspective-origin
    // // 这个属性可以让你从不同视角查看3d变换
    // // 容器
    // let container = document.querySelector('.container');

    // // 可是区域大小
    // let window_width = document.documentElement.clientWidth;
    // let window_height = document.documentElement.clientHeight;
    // // console.log(window_width, window_height);

    // // 监听鼠标移动事件，获取鼠标位置，计算鼠标在屏幕中的百分比
    // container.addEventListener('mousemove', (e) => {
    //   // 鼠标坐标
    //   let left = e.clientX;
    //   let top = e.clientY;
    //   // 百分比
    //   let left_p = left / window_width * 100;
    //   let top_p = top / window_height * 100;
    //   // 透视基点
    //   container.style.perspectiveOrigin = left_p + "% " + top_p + "%";
    // });
    </script>

</body>

</html>